<template>
  <ie-page>

    <template #extra>
      <n-button type="primary" @click="handleAdd">新增变量</n-button>
    </template>

    <ie-table
      :model="ConstantModel"
      :actions="['delete']"
      @delete:row="handleDelete"
      ref="tableRef"
    />
  </ie-page>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { useMessage } from 'naive-ui'
import { useMutation } from 'villus'
// import { queryDefs, mutationDefs } from '/@/graphql'

import ConstantModel from '/@/model/constant'

const tableRef = ref()
const columns = [
  {
    title: '匹配字段',
    key: 'match'
  },
  {
    title: '设定值',
    key: 'value'
  },
  {
    title: '最后更新时间',
    key: 'update_at',
    type: 'time'
  },
  {
    title: '创建时间',
    key: 'create_at',
    type: 'time'
  }
]

function handleDelete() {}

const visible = ref(false)
const isEdit = ref(false)
const message = useMessage()

const formRef = ref()
const formInitValue = {
  id: null,
  match: null,
  value: null
}
const formValue = ref({ ...formInitValue  })
const formRules = {
  match: { required: true, message: '匹配字段不可为空' },
  value: { required: true, message: '设定值不可为空' }
}

function handleAdd() {
  isEdit.value = false
  visible.value = true
}
function handleClose() {
  visible.value = false
  formValue.value = { ...formInitValue }
}
function handleConfirm() {
  isEdit.value
    ? handleUpdate()
    : handleCreate()
}

function handleCreate() {}
function handleUpdate() {}

// create
// const { execute: create } = useMutation(mutationDefs.INSERT_CONSTANT)

// function handleCreate() {
//   formRef.value.validate(errors => {
//     if (errors) return
//     const { id, ...constant } = formValue.value

//     create({ constant }).then(res => {
//       if (res.error) {
//         if (res.error.message.indexOf('Uniqueness violation') > -1) {
//           message.error('当前匹配字段已存在！')
//         }

//         return
//       }

//       tableRef.value?.load()
//         .then(() => {
//           visible.value = false
//           // reset form
//           formValue.value = { ...formInitValue }
//         })
//     })
//   })
// }

// // update
// const { execute: update } = useMutation(mutationDefs.UPDATE_CONSTANT)

// function editRow(row) {
//   isEdit.value = true

//   const form = {}

//   Object.keys(row).forEach(key => {
//     if (key in formValue.value) {
//       form[key] = row[key]
//     }
//   })

//   formValue.value = form

//   nextTick(() => {
//     visible.value = true
//   })
// }

// function handleUpdate() {
//   formRef.value.validate(errors => {
//     if (errors) return
//     const { id, ...constant } = formValue.value

//     update({ id, constant }).then(res => {
//       if (res.error) {
//         return
//       }

//       tableRef.value?.load()
//         .then(() => {
//           visible.value = false
//           // reset form
//           formValue.value = { ...formInitValue }
//         })
//     })
//   })
// }
</script>